<template>
  <body-index>
    <body-left title="关注" slot="bodyLeft">
      <template slot="main">
        <article-list-mode
          @read="read"
          @loadingMore="loadingMore()"
          :articleList="list"
          emptyTitle="你的关注里还没有人发布文章,去推荐看看吧"
        ></article-list-mode>
      </template>
    </body-left>

    <body-right slot="bodyRight"></body-right>
  </body-index>
</template>

<script>
import BodyIndex from "../../pages/body/BodyIndex.vue";
import BodyLeft from "../../pages/body/BodyLeft.vue";
import BodyRight from "../../pages/body/BodyRight.vue";
import ArticleListMode from "../mode/ArticleListMode.vue";
import ArticleMode from "../mode/ArticleMode.vue";
import { fake } from "../../assets/fake";
export default {
  components: { BodyLeft, BodyIndex, BodyRight, ArticleListMode, ArticleMode },
  data() {
    return {
      loading: false,
      isList: true,
      articleIndex: -1,
      list: [],
    };
  },
  methods: {
    loadingMore() {
      setTimeout(() => {
        const val = this.list[0];
        this.list = [];
        this.list.push(val);
      }, 2000);
    },
    read(index) {
      this.isList = false;
      this.articleIndex = index;
      let articleId = this.list[this.articleIndex].id;
      this.$router.push({
        name: "Article",
        query: {
          articleId: articleId,
        },
      });
    },
    getWriter(writerId) {
      return fake.methods.getUserInfo(writerId);
    },
    getComments(articleId) {
      return fake.methods.getComments(articleId);
    },
  },
  mounted() {
    let _this = this;
    let focusArticle = [];
    let capacity = [];
    fake.self.line.forEach((value) => {
      if (value.content === "关注") {
        focusArticle = value.list;
      }
    });
    if (focusArticle.length !== 0) {
      focusArticle.forEach((value) => {
        _this.list = capacity.concat(fake.methods.getArticleByWriter(value));
      });
    } else {
      this.$alert("没有任何关注", "提示", {
        confirmButtonText: "确定",
        type: "warning",
      });
    }
  },
};
</script>

<style>
</style>